<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>

		<!-- Page Title -->
		<text class="page-title">网上墓园设置</text>

		<!-- Main Content Area -->
		<view class="main-content">

			<!-- Current Setting Preview -->
			<view class="current-setting-preview">
				<text class="section-label">当前设置效果预览:</text>
				<div class="muysys" style=" text-align:center; position:relative;background:#F2F2F2; padding:8px 0;width: 100%;">
					<div :style="{border:'#999 1px solid', margin: '0 auto', width: '100%', height: 'auto',minHeight: '300rpx', background: `url(${mubg_img}) no-repeat top center`,backgroundSize: '100% auto', }">
						<div style="width:100%;">
							<!-- <image :src="mudi_img" style="width: 100%;" /> -->
							<!-- <div
								style="display: block; position:absolute; top:0px; left:0; width:100%; height:100%; z-index:102;">
							</div> -->
							<div
								:style="{width: '100%',height: 'auto',minHeight: '300rpx',zIndex: '2',backgroundPosition: 'bottom center',backgroundSize: '100% auto',backgroundRepeat: 'no-repeat',backgroundImage: `url(${mudi_img})`}">
							</div>
						</div>
					</div>
				</div>
			</view>

			<view class="options-section">
				<text class="section-label">选择墓碑样式:</text>
				<view class="options-grid">
					<view class="option-item tombstone-option" v-for="(tombstone, index) in muTemplateList"
						:key="'tombstone-' + index" :class="{ selected: selectedTombstoneId === tombstone.id }"
						@click="selectTombstoneOption(index)">
						<image class="option-image" :src="tombstone.cover" mode="aspectFit"></image>
						<view class="option-text-area">
							<text class="option-label">{{ tombstone.title }}</text>
						</view>
						<view class="radio-button">
							<view class="radio-dot" v-if="selectedTombstoneId === tombstone.id"></view>
						</view>
					</view>
				</view>
			</view>

			<view class="options-section background-options-section">
				<text class="section-label">选择墓园背景:</text>
				<view class="options-grid background-options-grid">
					<view class="option-item background-option" v-for="(background, index) in muBackgroundList"
						:key="'background-' + index" :class="{ selected: selectedBackgroundId === background.id }"
						@click="selectBackgroundOption(background.id)">
						<image class="option-image" :src="background.cover" mode="aspectFill"></image>
						<view class="option-text-area">
							<text class="option-label">{{ background.title }}</text>
						</view>
						<view class="radio-button">
							<view class="radio-dot" v-if="selectedBackgroundId === background.id"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- Action Buttons -->
			<view class="action-buttons">
				<button class="save-button" @click="handleSave">保存修改并应用设置</button>
				<button class="cancel-button" @click="handleCancel">不保存返回上一页</button>
			</view>

		</view>
		<Footer></Footer>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import CustomHeader from '@/components/header/index.vue';
	import Footer from '@/components/footer/index.vue';
	import { apiMuBackground, apiMuTemplate, apiMuDetail, apiMuSet } from '@/api/graveyardBackground'


	const memorialId = ref()
	const selectedBackgroundId = ref()
	const selectedTombstoneId = ref()
	
	const mudi_img = ref('')
	const mubg_img = ref('')

	
	
	// 获取墓地背景列表
	const muBackgroundList = ref([])
	const getMuBackgroundList = async () => {
		const res = await apiMuBackground({}).then(res=>{
			console.log(res)
			muBackgroundList.value = res.data
		}).catch(error=>{
			console.log(error)
		})
	}

	// 获取墓地模板列表
	const muTemplateList = ref([])
	const getMuTemplateList = async () => {
		await apiMuTemplate({}).then(res=>{
			console.log(res)
			muTemplateList.value = res.data
		}).catch(error=>{
			console.log(error)
		})
		
	}

	// 获取墓地详情
	const muDetail = ref()
	const getMuDetail = async () => {
		await apiMuDetail({id: memorialId.value}).then(res=>{
			console.log(res)
			muDetail.value = res.data
			selectedBackgroundId.value = res.data.bg_id ? res.data.bg_id : muBackgroundList.value[0].id
			selectedTombstoneId.value = res.data.template_id ? res.data.template_id : muTemplateList.value[0].id

			let mubgObj = muBackgroundList.value.find(item=>item.id == res.data.bg_id)
			console.log('mubgObj========',mubgObj)
			mubg_img.value = res.data.bg_id ? muBackgroundList.value.find(item=>item.id == res.data.bg_id).cover : muBackgroundList.value[0].cover
			mudi_img.value = res.data.template_id ? muTemplateList.value.find(item=>item.id == res.data.template_id).cover : muTemplateList.value[0].cover
		}).catch(error=>{
			console.log(error)
		})
		
	}
	onMounted( async () => {
		await getMuBackgroundList()
		await getMuTemplateList()
		await getMuDetail()
	})

	// 选择墓碑设置
	const selectTombstoneOption = (index) => {
		selectedTombstoneId.value = index;
		console.log('Selected tombstone:', tombstoneOptions.value[index]);
	};
	// 选择墓地背景
	const selectBackgroundOption = (id) => {
		selectedBackgroundId.value = id;
		
	};

	const handleSave = async () => {
		await apiMuSet({id: memorialId.value, bg_id: selectedBackgroundId.value, template_id: selectedTombstoneId.value}).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	};

	const handleCancel = () => {
		console.log('Cancel clicked');
		uni.navigateBack({
			delta: 1
		});
	}
	
	
	onLoad( async (options)=>{
		if(options.id){
			memorialId.value = options.id
		}
	})
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content area */
		color: #333;
	}

	/* Main Content Area */
	.main-content {
		/* No specific background or padding here, handled by individual sections */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center sections horizontally */
		padding: 0 20rpx;
		/* Side padding for the whole content block */
	}

	/* Current Setting Preview */
	.current-setting-preview {
		background-color: #fff;
		/* White background */
		width: 100%;
		/* Take full width within main-content padding */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		margin-bottom: 30rpx;
		/* Space below preview */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center content within the block */
	}

	.section-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		/* Space below label */
		align-self: flex-start;
		/* Align label to the left */
	}

	.preview-image {
		width: 100%;
		/* Image takes full width of its container */
		height: auto;
		/* Maintain aspect ratio */
		border: 1rpx solid #eee;
		/* Subtle border */
		box-sizing: border-box;
	}


	/* Options Section Styles */
	.options-section {
		background-color: #fff;
		/* White background */
		width: 100%;
		/* Take full width within main-content padding */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		margin-bottom: 30rpx;
		/* Space between sections */
		box-sizing: border-box;
	}

	.options-grid {
		display: flex;
		flex-wrap: wrap;
		/* Allow items to wrap */
		margin-left: -10rpx;
		/* Offset for left margin on items */
		margin-right: -10rpx;
		/* Offset for right margin on items */
	}

	.option-item {
		/* Base style for grid items */
		width: calc((100% - 60rpx) / 3);
		/* Calculate width for 3 per row, account for 10rpx margin on all sides */
		height: 200rpx;
		/* Fixed height for tombstone options - adjust if needed */
		border: 1rpx solid #ddd;
		/* Default border */
		border-radius: 8rpx;
		margin: 0 10rpx 20rpx 10rpx;
		/* Margin around items */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* Align content to the top */
		padding: 10rpx;
		/* Inner padding */
		position: relative;
		/* Needed for radio button */
	}

	/* Adjust height specifically for background options if different */
	.background-options-grid .option-item.background-option {
		height: 180rpx;
		/* Slightly shorter height for backgrounds */
	}

	.option-item.selected {
		border-color: #ff9800;
		/* Orange border for selected */
		background-color: #fff7e6;
		/* Light orange background for selected */
	}

	.option-image {
		width: 100%;
		/* Image takes full width of its container */
		flex-grow: 1;
		/* Allow image to take available vertical space */
		margin-bottom: 5rpx;
		/* Space below image */
		object-fit: cover;
		/* Cover the area without distortion */
		border-radius: 5rpx;
		/* Match item border radius */
	}

	.tombstone-option .option-image {
		object-fit: contain;
		/* Contain for tombstone image to show full item */
	}

	.option-text-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 22rpx;
		/* Smaller font for option labels */
		color: #333;
		text-align: center;
		/* Center the text block */
		width: 100%;
		/* Take full width */
		flex-shrink: 0;
		/* Prevent shrinking */
	}

	.option-label {
		/* No specific style */
	}

	.option-status {
		color: #999;
		/* Gray color for status */
		font-size: 20rpx;
		/* Even smaller font for status */
	}


	/* Radio Button Style */
	.radio-button {
		position: absolute;
		top: 10rpx;
		/* Adjust position */
		left: 10rpx;
		/* Adjust position */
		width: 30rpx;
		/* Size of the circle */
		height: 30rpx;
		border: 1rpx solid #999;
		/* Gray border */
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		/* White background */
	}

	.option-item.selected .radio-button {
		border-color: #ff9800;
		/* Orange border when selected */
	}

	.radio-dot {
		width: 18rpx;
		/* Size of the dot */
		height: 18rpx;
		background-color: #ff9800;
		/* Orange dot */
		border-radius: 50%;
	}


	/* Action Button Styles */
	.action-buttons {
		width: 100%;
		/* Take full width within main-content padding */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center buttons if needed */
		margin-top: 20rpx;
		/* Space above buttons */
	}

	.save-button {
		/* Orange button style */
		width: 100%;
		/* Take full width */
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #ff9800;
		/* Orange color */
		border: none;
		border-radius: 8rpx;
		text-align: center;
		margin-bottom: 20rpx;
		/* Space below button */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-button {
		/* Gray/White button style */
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #333;
		/* Dark gray text */
		background-color: #e0e0e0;
		/* Light gray background */
		border: 1rpx solid #ccc;
		/* Subtle border */
		border-radius: 8rpx;
		text-align: center;
		margin-bottom: 0;
		/* No bottom margin */
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with other sections */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	/* This style is crucial for pages using the fixed custom header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>